<template>
	<view>
	        <view class="uni-padding-wrap uni-common-mt">
	            <view class="uni-title uni-common-mt">
	            </view>
	            <view>
						<navigator  v-for="(item,index) in blogData" class="content" :url="`/subpkg/baby-care-detail/baby-care-detail?id=${item.blogId}`">
								
								<view style="margin-bottom: 10rpx;">
									<text style="font-size: 30rpx;color: darkmagenta;" v-if="index==0">
										{{item.ym}}
									</text>
									
									<text style="font-size: 30rpx;color: darkmagenta;" v-if="index!=0&&blogData[index].ym!=blogData[index-1].ym">
										{{item.ym}}
									</text>
								</view>
								
								<view class="item">
									<view>
										<image src="../../static/liulan.png" style="width: 50rpx;height: 50rpx;"></image>
									</view>
									
								
									<view class="item2">
										<text class="title">{{item.title}}</text> 
										<text class="detail">{{item.browseTime}}</text>
									</view>
							
								</view>
								<view class="line"></view>
						</navigator>
	            </view>
	             <view style="text-align: center;margin-top: 10rpx;" v-if="pageNum<allPage&&allPage!=0">
					 <text>正在加载更多数据...</text>
				 </view>
				 <view style="text-align: center;margin-top: 15rpx;" v-else>
				 	 <text class="noData">暂无更多数据</text>
				 </view>
	        </view>
	    </view>
</template>

<script>
	export default {
		onLoad(options){
			this.pull();
			// document.querySelector('.uni-page-head-hd').style.display = 'none';
			//uni.startPullDownRefresh();
			uni.startPullDownRefresh();
		},
		mounted() {
			
		},
		data() {
			return {
				        authorId:'',
				        pageNum:1,
						allPage:0,
				        blogData:[],
			            scrollTop: 0,
						pulling:true,
			            old: {
			                scrollTop: 0
			            }
			        }
		},
		
		onPullDownRefresh() {
			this.blogData = [];
			this.pageNum = 1;
			this.allPage = 0;
			this.pull();
		},
		onReachBottom() {
			console.log(123455);
			this.pull();
		},
		
		methods: {
			
			pull(){
				
				if(this.allPage == 0 || this.pageNum<=this.allPage){
					if(this.pulling){
						this.pulling = false;
						this.getBlogList();
					}
					uni.stopPullDownRefresh();
				}else{
					uni.stopPullDownRefresh();
				}
				
				
			},
			
			 async getBlogList() {
							
							const {data:res} =await uni.$http.post('/blog/page_pda_browse_blog_vo?rows=10&page='+this.pageNum);
						
							let length = res.data.records.length;
							for (var i = 0; i < length; i++) {
								this.blogData.push(res.data.records[i]);
							}
							
							
							this.pulling = true;
							this.pageNum=res.data.pageNum+1;
							this.allPage=res.data.pages;
							uni.stopPullDownRefresh();
			 			},
			upper: function(e) {
			            console.log(e)
			        },
			        lower: function(e) {
			            console.log(e)
			        },
			        scroll: function(e) {
			            console.log(e)
			            this.old.scrollTop = e.detail.scrollTop
			        },
			        goTop: function(e) {
			            this.scrollTop = this.old.scrollTop
			            this.$nextTick(function() {
			                this.scrollTop = 0
			            });
			            uni.showToast({
			                icon:"none",
			                title:"纵向滚动 scrollTop 值已被修改为 0"
			            })
			        }
		}
	}
</script>

<style lang="scss">
.chat_data{
  border-radius: 5rpx;
  padding: 1%;
  margin-top: 2%;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  display: flex;
  justify-content: space-between;
}
.chat_header_pic{
  width: 110rpx;
  height: 110rpx;
}


.chat_view_pic{
  width: 20%;
}

.chat_info{
  float: left;
  width: 86%;
  flex-direction: column;
  display: flex;
}

.line{
  margin-top: 10rpx;
  height: 1rpx;
  width: 100%;
  background-color: #D8D8D8;
}

.navigator{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFE1FF;
  border-radius: 15rpx;
  color: #666;
}

.search_input{
  width: 90%;
  margin: 0 auto;
  height: 90rpx;
  padding: 10rpx;
 
}
.chat_time{
  width: 20%;
  margin-top: 5%;
  font-size: xx-small;
}


.chat_info_name{
  font-size: medium;
  font-weight: bold;
}
.chat_info_msg{
  font-size: x-small;
  color: darkkhaki;
}

.noData{
	color: #D8D8D8;
}
.content{
	padding-left: 30rpx;
	padding-right: 30rpx;
	padding-bottom: 20rpx;
}
.title{
	width: 90%;
	margin-left: 10rpx;
	text-align: left;
	font-size: 30rpx;
}
.detail{
	margin-left: 10rpx;
	text-align: left;
	color: #999;
	font-size: 25rpx;
}
.item{
          display: flex;
          justify-content: space-between;
          align-items:center;
 }
 
 .item2{
	 width: 98%;
    display: flex; 
	flex-wrap: wrap; 
  }
</style>
